<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>计算属性和监视的使用和区别</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model="firstName" /> <br />
            名：<input type="text" v-model="lastName" />
            <!-- 复杂的插值语法 -->
            <p>{{firstName + '-' + lastName}}</p>
            <!-- 方法 -->
            <p>{{getFullName()}}</p>
            <p>{{getFullName()}}</p>
            <!-- 计算属性 -->
            属性计算：<br />
            <p>{{fullName}}</p>
            <p>{{fullName}}</p>

            <!-- 监控数据  -->
            数据监控：<br />
            <p>{{fullName2}}</p>
        </div>
        <script>
            let vm = new Vue({
                el: '#root',
                data: {
                    firstName: 'china',
                    lastName: 'vane',
                    fullName2: '',
                },
                methods: {
                    //通过一个方法我们可以实现名称的显式
                    getFullName() {
                        console.log('getFullName被调用');
                        return this.firstName + '-' + this.lastName;
                    },
                },
                //计算属性：当我们需要这个数据但是又没有，这个数据和原有的数据还有关系
                computed: {
                    // 属性计算有get与set
                    /*
                    fullName:{
                        get(){

                        },
                        set(){

                        }
                      }
                    */
                    // 默认编写计算函数实现的是get操作，如果需要进行set则需要写全
                    fullName() {
                        // 通过计算属性也可以实现名称的显式而且和写方法写法差不多
                        console.log('计算属性fullName被调用');
                        return this.firstName + '-' + this.lastName;
                    },
                },
                // 数据必然存在，可以进行监视这个数据
                watch: {
                    firstName: {
                        immediate: true, //立即的意思，打开页面数据虽然没有改变，仍然强制执行一次回调函数handler
                        handler(newValue, oldValue) {
                            //当firstName这个数据发生改变的时候会调用handler函数
                            this.fullName2 = newValue + '-' + this.lastName;
                        },
                    },
                },
            });

            // TODO: 实例的$watch监控
        </script>
    </body>
</html>
